<script setup>
import { ref, reactive, toRefs, onMounted } from "vue";
import { useRoute, useRouter } from 'vue-router'
import {postTagAddTags} from '@/api'
// import { ru } from "element-plus/es/locale";
const route = useRoute()
const router = useRouter()
const userId = ref('')
onMounted(()=>{
  userId.value = route.query.id
    console.log("获取到的参数",userId );
})
const ruleFormRef = ref()
const ruleForm = reactive({
  biaoqianname:'',
  rule: [ 
    { name: '' }
  ]
});
 //获取群标签列表接口信息
 
const onSubmit = async (formEl) => {
  console.log(formEl)
  if (!formEl) return
	await formEl.validate((valid, fields) => {
        if (valid) {
       console.log('添加',ruleForm.rule)
       if(ruleForm.rule == ''){
        alert('标签名称不能为空')
       }else{}
        var data = []
      for(var i =0;i<ruleForm.rule.length;i++){
        data.push(ruleForm.rule[i].name)
      }
			postTagAddTags({
        group_name:ruleForm.biaoqianname,
        tag_data:data
      }).then((res) => {
				console.log(res, '3333')
				ElMessage({ message: '提交成功', type: 'success' })
				router.push('customerGroupLabel')
			})  
		} else {
			console.log('error submit!', fields)
			ElMessage({ message: '失败', type: 'error' })
    }	
	})
  
}
 // 取消按钮
 const cancelSubmit =()=>{
    ElMessage({ message: '取消成功', type: 'success' })
          router.push('customerGroupLabel')
  }
// 添加字标签
const addInput = () => {
  ruleForm.rule.push({ name: '' })
}
const deleteInput = (index) => {
  ruleForm.rule.splice(index, 1)
}
// 弹窗上移
const popUp = (index) => {
  if (index != 0) {
    ruleForm.rule[index] = ruleForm.rule.splice(index - 1, 1, ruleForm.rule[index])[0];
  } else {
    ruleForm.rule.push(ruleForm.rule.shift());
  }
}
// 弹窗下移
const popDown = (index) => {
  if (index != ruleForm.rule.length - 1) {
    ruleForm.rule[index] = ruleForm.rule.splice(index + 1, 1, ruleForm.rule[index])[0];
  } else {
    ruleForm.rule.unshift(ruleForm.rule.splice(index, 1)[0]);
  }
}
const item ='' 
</script>
<template>
  <!-- 修改标签组弹窗 -->
  <div class="allStyle">
    <div class="dialogTSY">
        <el-icon style="color:#409eff">
          <BellFilled />
        </el-icon>
        <span style="color: #595959;">管理员可根据不同部门选择展示不同的标签组，部门管理员可创建部门可见的标签</span>
    </div>
    <div class="formStyle">
      <el-form ref="ruleFormRef" :model="ruleForm" >
        <el-form-item label="标签组名称:" label-width="150px" style="width: 500px">  
          <el-input v-model="ruleForm.biaoqianname" autocomplete="off" show-word-limit maxlength="15" />
        </el-form-item>
        <el-form-item label="标签名称:"  label-width="150px">
          <div style="display: flex;" class="content-item" v-for="(item, index) in ruleForm.rule" :key="index">
            <span>
              <el-input v-model="item.name"  autocomplete="off" style="margin-bottom: 10px;width: 350px;" show-word-limit
                maxlength="15" />
            </span>
            <span style="" v-if="ruleForm.rule.length !== 1">
              <el-icon style="margin-left: 10px" @click="deleteInput(index)">
                <Remove />
              </el-icon>
              <span style="margin-left: 10px" @click="popUp(index)">
                <i class="iconfont"> &#xe61c;</i>
              </span>
              <span style="margin-left: 10px" @click="popDown(index)">
                <i class="iconfont"> &#xe61b;</i>
              </span>
            </span>
          </div>
        </el-form-item>
        <el-form-item label-width="150px" @click="addInput">
          <p style="display: flex;margin-top: -10px;">
            <el-icon color="#1890ff">
              <CirclePlus />
            </el-icon>
          <p style="color: #1890ff;margin-top: -9px;margin-left: 3px;">添加标签</p>
          </p>
        </el-form-item>
      </el-form>
    </div>
    <div class="addBottmStyle">
      <el-button @click="cancelSubmit">取消</el-button>
      <el-button  type="primary" @click="onSubmit(ruleFormRef)" >确定</el-button>
    </div>
  </div>
  </template>

<style scoped>
@import "../../../style/iconfont.css";

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

.allStyle {
  background-color: #ffffff;
  margin: 20px;
}

.dialogTSY {
  margin: 20px;
  display: flex;
  align-items: center;
  background-color: #effaff;
  padding: 8px 10px;
}
.dialogTSY span{
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  margin-left: 5px;
}
.formStyle {
  width: 700px;
  margin-top: 20px;
}

.addBottmStyle {
  float: left;
  margin-left: 30%;
  margin-bottom: 20px;
}
</style>